<template>
  <div class="customer-table-container">

    <!-- 操作工具栏 -->
    <div class="table-actions">
      <div class="left-actions">
        <el-button
            v-for="action in actions"
            :key="action.name"
            :type="action.type"
            size="small"
            @click="emitAction(action.name)"
        >
          {{ action.label }}
        </el-button>
      </div>
      <div class="right-actions">
        <el-checkbox v-model="selectAll">整单</el-checkbox>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-scrollbar
        class="custom-scrollbar"
        always
        view-class="scrollbar-view"
    >
      <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column
            v-for="column in columns"
            :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width"
        >
          <template #default="{ row }">
            <el-link
                v-if="column.prop === 'code'"
                type="primary"
                @click="emit('code-click', row)"
            >
              {{ row[column.prop] }}
            </el-link>
            <span v-if="column.prop === 'status'">
              <el-tag :type="row.status === '可用' ? 'success' : 'danger'">
                {{ row.status }}
              </el-tag>
            </span>
<!--            <span v-else>{{ row[column.prop] }}</span>-->
          </template>
        </el-table-column>
        <!-- 固定操作列 -->
        <el-table-column label="操作" width="300px" align="center">
          <template #default="{ row }">
            <el-button type="danger" @click="handleDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>

    <!-- 分页组件 -->
    <div class="pagination-wrapper">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue'

const props = defineProps({
  // 表格列配置
  columns: {
    type: Array as () => Array<{
      prop: string
      label: string
      width?: number
    }>,
    default: () => [
        { prop: 'code', label: '单据编号', width: 200 },
        { prop: 'orderDate', label: '单据日期', width: 200 },
        { prop: 'sourceCode', label: '源单号', width: 200 },
        { prop: 'providerName', label: '供应商名称', width: 200 },
        { prop: 'deptName', label: '部门名称', width: 200 },
        { prop: 'businessmanName', label: '业务员名称', width: 200 },
        { prop: 'orderStatus', label: '单据状态', width: 200 },
        { prop: 'storeManName', label: '库管员名称', width: 200 },
        { prop: 'typeName', label: '业务类型', width: 200 },
        { prop: 'orderTypeId', label: '订单类型', width: 200 },
        { prop: 'inStoreSumPrice', label: '入库总价', width: 200 },
        { prop: 'createName', label: '创建者名称', width: 200 },
        { prop: 'createDate', label: '创建日期', width: 200 },
        { prop: 'updateName', label: '更新者名称', width: 200 },
        { prop: 'updateDate', label: '更新日期', width: 200 }
      ],
  },
  // 表格数据（已分页）
  tableData: {
    type: Array as () => any[],
    required: true
  },
  // 总数据量
  total: {
    type: Number,
    required: true
  },

  // 当前页码
  currentPage: {
    type: Number,
    required: true
  },
  // 每页显示条数
  pageSize: {
    type: Number,
    default: 5
  }
})

const emit = defineEmits(['page-change', 'action'])

// 操作按钮配置
const actions = ref([
  {name: 'add', label: '新增', type: 'success'},
  {name: 'import', label: '导入', type: 'warning'},
  {name: 'eeexport', label: '导出', type: 'danger'},
  {name: 'check', label: '审核', type: 'danger'},
])

// 编辑事件
const handleEdit = (row: any) => {
  emit('edit', row); // 触发编辑事件
}

//删除事件
const handleDelete = (row: any) => {
  emit('delete', row); // 触发删除事件
}

// 分页变化处理
const handlePageChange = (newPage: number) => {
  emit('page-change', newPage)
}

// 操作按钮事件
const emitAction = (actionName: string) => {
  emit('action', actionName)
}

// 多选处理
const selectAll = ref(false)
const selectedRows = ref<any[]>([])

const handleSelectionChange = (selection: any[]) => {
  selectedRows.value = selection
  emit('selection-change', selection)
}

</script>

<style scoped>
.customer-table-container {
  background: #fff;
  padding: 16px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.table-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.left-actions {
  display: flex;
  gap: 8px;
}

.pagination-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.el-tag {
  padding: 0 8px;
  height: 24px;
  line-height: 24px;
}
</style>
